<template id="">
    <div class="">
        <div class="cen-table">
            <div class="table-top">Latest Transactions</div>
            <!--  -->
            <table class="table-layout" border="1" :class="{ 'loading': isLoading }">
                <thead class="layout-head">
                    <tr>
                        <th width="5%" >Block</th>
                        <th width="30%">Hash</th>
                        <th width="10%">Recipients</th>
                        <th width="15%">Amount ({{headerData.shortName}})</th>
                        <th width="20%">Timestamp</th>
                    </tr>
                </thead>
                <tbody class="layout-cen " >

                    <tr v-for="(item,index) of listData">
                        <td class="cursor" @click="block(item,index)" >{{item.height}}</td>
                        <td class="cursor" @click="lookHash(item,index)">{{item.txId}}</td>
                        <td>{{item.recipients}}</td>
                        <td>{{item.amount}}</td>
                        <td>{{item.time}}</td>
                    </tr>
                </tbody>

            </table>

            <div class="table-page">
                <v-pagination class="ulpages" :layout="['prev', 'pager', 'next']" :total="pageObj.count" @page-change="pageChange" @page-size-change="pageSizeChange"></v-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
    name:'body-index',
    data(){
        return{
            isLoading: true,
            listData:[],
            pageObj:{//分页参数
                count       :0,
                pageNum     :1,
                pageSize    :10
            }
        }
    },
    computed: {
        ...mapGetters(['G_SELECT_DATA']),
    },
    created(){
        this.headerData = this.G_SELECT_DATA;
    },
    mounted(){
        // let tool = this.$root.tool;
        // console.log(tool.generateHash.Hash('this is a string'));
        this.getListData();
    },
    methods:{

        onRowClick(){

        },

        lookHash(item,index){
            if(item.txId){
                this.$router.push({name:'tx',params:{txid:item.txId}});
            }
        },
        block(item,index){
            if(item.height){
                this.$router.push({name:'block',params:{has:item.height,type:1}});
            }
        },
        // 上，下一页
        pageChange(pageIndex){
            this.pageObj.pageNum = pageIndex;
            this.getListData();
        },
        // 跳转页面
        pageSizeChange(pageSize){
            this.pageObj.pageNum = pageSize;
        },
        // 根据colorId获取
        getListData(){
            this.isLoading = true;
            let colorId = this.headerData.colorId;
            let requerstHeader = {
                method  : 'get',
                params  : {
                    searchStr   :'',
                    pageNum     :this.pageObj.pageNum,
                    pageSize    :this.pageObj.pageSize
                }
            }
            // colorId存在的时候使用彩色币的查询，否则使用hsr的查询
            if(colorId){
                requerstHeader.url = 'explorer/colorcoins/api/v1/query/' + colorId;
            }else{
                requerstHeader.url = 'explorer/hsr/api/v1/query';
            }

            this.$http(requerstHeader).then((res)=>{
                let data = res.data;
                if(data.responseCode === 1){

                    if(colorId){
                        this.listData = data.responseData.colorTxList;
                        this.pageObj.count = data.responseData.page.count;
                    }else{
                        this.listData = data.responseData.hsrTxList;
                        this.pageObj.count = data.responseData.page.count;
                    }
                    this.isLoading = false;

                }
            })
        }
    },
    watch:{
        '$route'(to,from){
            // 当切换其他币种的时候，重新根据colorId获取列表数据
            if(to.name == 'explore' || to.name == 'default'){
                this.headerData = this.G_SELECT_DATA;
                this.getListData();
            }
        }
    }
}
</script>
